<template>
    <el-dialog v-dialogDrag title="用户选择" :visible.sync="openDialog" width="1000px" :append-to-body="true" :close-on-click-modal="false" @close="handleClose">
        <div class="user-picker__info">
            <span>已选中: <b>{{selectData.length}}</b> 项目</span>
            <el-button type="text" style="padding:0; margin-left:10px;line-height: 1;height: auto;" @click="handleCancelSelection">取消</el-button>
            <el-button type="primary" class="btn-selection" size="mini" @click="handleConfirmSelection">确认选择</el-button>
        </div>
        <div class="user-picker__container">
            <div class="department-panel">
                <h3>所属部门</h3>
                <div class="department-panel__scroll">
                    <el-tree ref="deptTreeRef" 
                        :data="departmentData" 
                        node-key="id" 
                        highlight-current
                        default-expand-all 
                        :expand-on-click-node="false" 
                        :check-on-click-node="true" 
                        :props="defaultProps" 
                        @node-click="handleNodeClick">
                    </el-tree>
                </div>
            </div>
            <div class="table-panel">
                <div class="user-table__ops">
                    <div class="search-wrapper">
                        <el-form :inline="true" :model="searchForm" size="small">
                            <el-form-item>
                                <el-input v-model="searchForm.name" placeholder="昵称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="searchForm.mobile" placeholder="手机号码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
                                <el-button type="" @click="handleReset" icon="el-icon-refresh">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="user-table__wrapper">
                    <el-table ref="userTable" 
                        :data="userData" 
                        stripe 
                        border 
                        style="width: 100%" 
                        :height="tableHeight" 
                        size="mini" 
                        :header-cell-class-name="cellClass" 
                        class="user-picker__table"
                        :row-key="getRowKeys"
                        @select="handleSelectionChange" 
                        @select-all="handleSelectAll">
                        <el-table-column type="selection" width="40" :reserve-selection="true" align="center"></el-table-column>
                        <el-table-column prop="username" label="用户名" width="150"></el-table-column>
                        <el-table-column prop="name" label="昵称"></el-table-column>
                        <el-table-column label="角色">
                            <template #default="{row}">
                                {{ row.roles.length>0?row.roles[0].role_name:"--" }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="mobile" label="手机号码"></el-table-column>
                    </el-table>
                </div>
                <div class="pages">
                    <el-pagination background :pager-count="5" 
                        :current-page.sync="pageInfo.current" 
                        :page-sizes="pageInfo.size" 
                        :page-size="pageInfo.pagesize" 
                        layout="total, sizes, prev, pager, next" 
                        :total="pageInfo.total" 
                        @size-change="handleSizeChange" 
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import api from "@/api/Process/org.js"
export default {
    name: "UserPicker",
    props: {
        value: Array,
        open: {
            type: Boolean,
            default: false
        },
        multi: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            openDialog: this.open,
            tableHeight: "calc(100% - 42px)",
            deptId: "",
            pageInfo: {
                page: 1,
                pageSize: 10,
                size: [10, 20, 50],
                total: 0
            },
            departmentData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            searchForm:{
                name:"",
                mobile: "",
            },
            userData: [],
            selectData:[]
        }
    },
    computed: {

    },
    watch: {

    },
    cteated() {

    },
    mounted() {
        console.log("初始化UserPicker==========>", this.value)
        this.getDepts()
        // this.$nextTick(()=>{
            
        // })
        
    },
    methods: {
        getRowKeys(row){
            return row.userId
        },
        cellClass(cell){
            if(!this.multi){
                if(cell.columnIndex === 0){
                    return "disable-all-select";
                }
            }
            return "";
        },
        //自定义事件返回
        handleNodeClick(data) {
            this.deptId = data.parentId=="0"?"":data.id
            console.log("部门ID===>",this.deptId)
        },
        handleSelectionChange(selection,row) {
            if(this.multi){
                this.selectData = selection
            }else{
                this.$refs.userTable.clearSelection()
                if(row){
                    this.$nextTick(()=>{
                        this.$refs.userTable.toggleRowSelection(row,true)
                        this.selectData = [row]
                    })
                }
            }
            
        },
        handleSelectAll(selection){
            this.selectData = selection
        },
        handleCancelSelection(){
            this.selectData=[]
            this.$refs.userTable.clearSelection()
        },
        handleConfirmSelection(){
            if(this.selectData.length==0){
                return this.$message.error("请选择用户")
            }
            this.$emit("select-complete", this.selectData)
            this.handleClose()
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val
            this.getUsers()
        },
        handleCurrentChange(val) { 
            this.pageInfo.page = val
            this.getUsers()
        },
        handleClose() {
            this.$emit("update:open", false)
        },
        handleSearch(){
            this.getUsers()
        },
        handleReset(){
            this.searchForm = {
                name:"",
                mobile: "",
            },
            this.getUsers()
        },
        getUsers(){
            const loading = this.$loading({
                lock: true,//同v-loading的修饰符
                text: "加载中...",//加载文案
                backgroundColor: 'rgba(255,255,255,0.8)',//背景色
                spinner: 'el-icon-loading',//加载图标
                target: document.querySelector(".user-picker__table .el-table__body-wrapper")//loading需要覆盖的DOM节点，默认为body
            })
            api.pageUserByDeptId({
                companyStructId:this.deptId,
                name:this.searchForm.name,
                mobile: this.searchForm.mobile,
                page:this.pageInfo.page,
                limit:this.pageInfo.pageSize
            }).then(res=>{
                loading.close()
                if(res.code===10000){
                    this.userData = res.data.list
                    this.pageInfo.total = res.data.totalCount

                    this.$nextTick(()=>{
                        if(this.value && this.value.length>0){
                            this.userData.forEach(item=>{
                                if(this.value.includes(item.userId)){
                                    this.$refs.userTable.toggleRowSelection(item,true)
                                }
                            })
                        }
                    })
                }
            })
        },
        getDepts(){
            api.getDeptList().then(res=>{
                if(res.code === 10000){
                    this.departmentData = res.data
                    this.$nextTick(()=>{
                        this.$refs.deptTreeRef.setCurrentKey(res.data[0].id)
                    })
                    this.deptId = res.data[0].id
                    this.getUsers()
                }
            })
        }
    },
    
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
    padding: 20px;
}
::v-deep .disable-all-select{
    .el-checkbox{
        display: none;
    }
}
.user-picker__info{
    position: relative;
    padding:12px;
    background-color: #dff1ff;
    margin-bottom:10px;
    .btn-selection{
        position: absolute;
        right:10px;
        top:7px;
    }
}
.user-picker__container {
    display: flex;
    flex-flow: row nowrap;
    height: 509px;
    .department-panel {
        flex: 0 0 250px;
        border: 1px solid #ebeef5;
        display: flex;
        flex-direction: column;
        h3 {
            border-bottom: 1px solid #ebeef5;
            line-height: 40px;
            padding: 0 15px;
            background-color: #f8f8f8;
            margin:0;
            flex: 0 0 40px;
            font-size:14px;
        }
        .department-panel__scroll{
            flex:1;
            height:100%;
            padding:10px 0;
            overflow: auto;
        }
    }
    .table-panel {
        flex: 1;
        margin-left: 10px;
        width:0;
        position: relative;
        padding-top:50px;
        
        .user-table__ops{
            position: absolute;
            height:51px;
            top:0;
            width:100%;
            .search-wrapper{
                background-color: #f8f8f8;
                padding:4px 10px;
                border:1px solid #ebeef5;
            }
            .el-form-item{
                margin-bottom:0;
            }
            .el-input{
                width:150px;
            }

           
        }
        .user-table__wrapper{
            position: absolute;
            width:100%;
            height: calc(100% - 50px);
        }
        :deep(.el-table) th.el-table__cell {
            background-color: #f8f8f8;
        }
        .pages {
            height: 40px;
            text-align: right;
            padding-top: 10px;
            position: absolute;
            bottom:0;
            width:100%;
            .el-pagination {
                padding: 0;
                :deep(.el-pagination__total) {
                    float: left;
                }
            }
        }
    }
}
</style>
